<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
  

    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    <button onclick="add()">add</button>
<script>
/* 
1. 手写ajax
2. 跨域实现方式 jsonp| cors
3.   
*/

/* const xhr  = new XMLHttpRequest();
xhr.open("GET",'/api',false)
xhr.onreadystatechange = ()=>{
    if(xhr.readyState===4){
        if(xhr.status===200){
            alert(xhr.responseText);
        }
    }
}
xhr.send(); */
const xhr  = new XMLHttpRequest();
xhr.open("POST",'/login',false) // true 同步
xhr.onreadystatechange = ()=>{
    if(xhr.readyState===4){
        if(xhr.status===200){
            alert(xhr.responseText);
        }
    }
}
let data = {
    userName:"xxx",
    pwd:'xxx';
}
xhr.send(JSON.stringify(data));

//  0- (未初始化)还没有调用send()方法
//  1- (载入)已调用send()方法,正在发送请求
//  2-(载入完成) send()方法执行完成，已经接收到全部响应内容
//  3-(交互)正在解析响应内容
//  4- (完成)响应内容解析完成,可以在客户端调用

// xhr.status
//  2xx -表示成功处理请求,如200
//  3xx-需要重定向,浏览器直接跳转,如301 302 304
//  4xx-客户端请求错误,如404 403
//  5xx -服务器端错误


// 同源策略
//  ajax请求时,浏览器要求当前网页和server必须同源(安全)
//  同源:协议、域名、端口,三者必须--致
//  前端: http://a.com:8080/ ; server : https://b.com/api/xxx


// 加载图片css js可无视同源策略
//  <img src=跨域的图片地址/>
//  < link href=跨域的css地址/>
//  <script src=跨域的js地址>  


 
// <img />可用于统计打点，可使用第三方统计服务
// <link /> <script> 可使用CDN，CDN一般都是外域
// <script>可实现JSONP

//     跨域
//  所有的跨域,都必须经过server端允许和配合
//  未经server端允许就实现跨域,说明浏览器有漏洞,危险信号


// JSONP
//  访问https://baidu.com/ , 服务端-定返回一 个html文件吗?
//  服务器可以任意动态拼接数据返回,只要符合html格式要求
//  同理于<script src= "https://imooc.com/getData.js" >

//     JSONP
//  <script> 可绕过跨域限制
//  服务器可以任意动态拼接数据返回
//  所以，<script>就可以获得跨域的数据,只要服务端愿意返回

// jq 实现跨域
/* $.ajax({
    url:'http://localhost:8882/x-origin. json' 
    dataType: ' j sonp
    jsonpCallback: ' callback'
    success: function (data) {
    console. log(data)
}) */

// CORS -服务器设置http header
//第二个参数填写允许跨域的域名称，不建议直接写 "*”
// response . setHeader("Access-Control-Allow- Origin", "http://localhost:8011");
// response. setHeader("Access-Control-Allow-Headers", "X-Requested-With") ;
// response . setHeader("Access-Control-Allow-Methods", "PUT,POST, GET,DELETE, OPTIONS")

//接收跨域的cookie
// response . setHeader("Access-Control-Allow-Credentials", "true");

function jsonp({url,params,callback}){
  
  const script=document.createElement("script");
  let arr=[];
  params={...params,callback};
  for(var key in params){
    arr.push(`${key}=${params[key]}`);
  }
  script.src = `${url}${url.indexOf("?"==-1)?'?':"&"}${arrs.join('&')}`;  
  document.body.appendChild(script);
  window[callback] =res=>{
      callback(res);
      document.body.remove(script);
  }
  window[callback]();
}



/* function jsonp({ url, params, callback }) {
      return new Promise((resolve, reject) => {
        let script = document.createElement('script');
        window[callback] =  (data) => {
          resolve(data);
          document.body.removeChild(script);
        }
        params = { ...params, callback }; 
        let arrs = [];
        for (let key in params) {
          arrs.push(`${key}=${params[key]}`);
        }
        script.src = `${url}?${arrs.join('&')}`;
        script.type="type/javascript";
        document.body.appendChild(script);
        script.onerror = () => {
          reject(new Error(`fetch ${url} failed`));
          document.body.removeChild(script);
        }
      });
    }
    jsonp({
      url: 'http://localhost:3001/',
      params: { test: 'test' },
      callback: 'show'
    }).then((data) => {
      console.log(data);
    }).catch((e) => { console.log(e) }) */


</script>
</body>
</html>